<template>
    <div class="manager">
        <div id="background">
            <div class="background_image"></div>
            <div class="background_overlay"></div>
            <div class="background_filter"></div>
        </div>
        <div id="managerHeader">
            <div class="logo">
                <!-- <img width="200" src="@/assets/logo.png" alt=""> -->
                <div class="logoImage">
                    <img src="@/assets/图片.png" alt="Logo">
                </div>
                <div class="logoText">
                    <span class="logoPrimaryText">智创考题</span>
                    <!-- <span class="logoSecondaryText">计算机科学与工程学院</span> -->
                </div>
            </div>
            <div class="navigation">
                <!-- 单独处理首页 -->
                <div class="home">
                    <!-- <router-link class="link" to="/" exact> -->
                    <router-link active-class="link" :to="{ path: '/' }" exact>
                        首页
                    </router-link>
                </div>
                <div class="catalogues">
                    <router-link v-for="catalogue in catalogues" :key="catalogue.path" class="link" :to="catalogue.path"
                        exact>
                        {{ catalogue.title }}
                    </router-link>
                </div>
            </div>
            <div class="search">
                <input type="text" :placeholder="searchPlaceholder" v-model="searchInputValue"
                    @input="searchPrompt(searchInputValue)" />
                <div class="searchButton iconfont icon-likesprogramchaxun" @click="search(searchInputValue)"></div>
            </div>
            <div class="user" ref="userButton" @mouseenter="userNavigationShow($event)"
                @mouseleave="userNavigationHide($event)">
                <router-link class="userLink" :to="userData ? { name: 'personalCenter' } : { name: 'login' }" exact>
                    <div class="avatar">
                        <img :src="userData?.avatarPath ? (baseUrl + userData?.avatarPath ) : userAvatar()" alt="">
                    </div>
                    <div class="username">{{ userData != null ? userData.nickName : '未登录' }}</div>
                </router-link>
                <div class="userNavigation" v-if="userData != null">
                    <div class="home">
                        <router-link class="link" to="/personalCenter" exact>
                            <span class="iconfont icon-likesprogramyonghuxinxi1"></span>
                            个人资料
                        </router-link>
                    </div>
                    <div class="catalogues">
                        <router-link class="link" to="/personalCenter/myCourse" exact>
                            <span class="iconfont icon-likesprogramjiaoyu"></span>
                            我的课程
                        </router-link>
                        <router-link class="link" to="/personalCenter/myCollection" exact>
                            <span class="iconfont icon-likesprograma-shoucang"></span>
                            我的收藏
                        </router-link>
                        <router-link class="link" to="/personalCenter/learningRecord" exact>
                            <span class="iconfont icon-likesprogramzhishiku"></span>
                            学习记录
                        </router-link>
                    </div>
                    <div class="link" @click="handleLogout">
                        <span class="iconfont icon-likesprogramtuichudenglu"></span>
                        退出登录
                    </div>
                </div>
                <div class="userNavigation" v-else>
                    <router-link class="link" to="/loginRegister">
                        <span class="iconfont icon-likesprogramyonghu"></span>
                        登录
                    </router-link>
                    <router-link class="link" to="/loginRegister/register">
                        <span class="iconfont icon-likesprogramuser_informationyonghuxinxi"></span>
                        注册
                    </router-link>
                </div>
            </div>
        </div>
        <div id="content">
            <router-view />
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, provide, onMounted } from 'vue';
import { userApi } from '@/api/Users';
import { UserData } from '@/types/UserData';
import { userAvatar } from '@/types/Base64Image';
import { baseUrl } from '@/util/request';

// 用户信息
const userData = ref<UserData>(null);

// 导航信息
const catalogues = reactive([
    { path: '/course', title: '课程' },
    { path: '/questionBank', title: '题库' },
    { path: '/note', title: '笔记管理' },
    { path: '/aiTeacher', title: '消息通知' },
    // { path: '/member', title: 'Plus 会员' },
    // { path: '/message', title: '测试文本' }
]);

// Initialize Coze Web SDK
onMounted(() => {
    userApi.getLoginUserData().then((res) => {
        userData.value = res;
    });

    // Load Coze SDK script
    const cozeScript = document.createElement('script');
    cozeScript.src = 'https://lf-cdn.coze.cn/obj/unpkg/flow-platform/chat-app-sdk/1.2.0-beta.5/libs/cn/index.js';
    cozeScript.onload = () => {
        // Initialize Coze Web SDK after script is loaded
        // Use type assertion to avoid TypeScript errors
        const CozeWebSDK = (window as any).CozeWebSDK;

        // Get user-specific identifier
        let userId: string;

        // if (isLogin.value) {
        //     // For logged-in users, use their actual user ID
        //     userId = SignUtil.getUserId();
        // } else {
        //     // For guest users, try to retrieve from localStorage or generate a new one
        //     const storedGuestId = localStorage.getItem('coze_guest_user_id');
        //     if (storedGuestId) {
        //         userId = storedGuestId;
        //     } else {
        //         userId = 'guest-' + generateUniqueId();
        //         localStorage.setItem('coze_guest_user_id', userId);
        //     }
        // }

        new CozeWebSDK.WebChatClient({
            config: {
                bot_id: '7481489573307727913',
                user_id: userId, // Add user-specific ID to ensure private conversation history
            },
            componentProps: {
                title: '智创考题学习助手',
            },
            auth: {
                type: 'token',
                token: 'pat_dttiqMP4Q4q6IFoEidVZRwaquYkJbDESISQFttK7NrL5za4afbVySi5KAivZVIep',
                onRefreshToken: function () {
                    return 'pat_dttiqMP4Q4q6IFoEidVZRwaquYkJbDESISQFttK7NrL5za4afbVySi5KAivZVIep'
                }
            }
        });
    };
    document.head.appendChild(cozeScript);
});

// 退出登录
const handleLogout = () => {
    userData.value = null;
    userApi.logout();
};

// 搜索框输入值
const searchInputValue = ref('');

// 搜索方法
const searchDefaultFunction = (input: string): void => { // 默认搜索方法
    console.log('默认搜索：', input);
};
const searchFunction = ref(searchDefaultFunction);

// 搜索提示方法
const searchDefaultPromptFunction = (input: string): Array<Object> => { // 默认搜索提示方法
    console.log('默认搜索提示：', input);
    return [{ title: '搜索提示', path: '/search' }, { title: '搜索提示', path: '/search' }];
};
const searchPromptFunction = ref(searchDefaultPromptFunction);

// 搜索框提示字符串
const searchDefaultPlaceholder = '搜索'; // 默认搜索提示
const searchPlaceholder = ref(searchDefaultPlaceholder);

// 接管搜索
const takeOverSearch = (search: (input: string) => Array<Object>, prompt: (input: string) => Array<Object>, placeholder: string) => {
    searchFunction.value = search;
    searchPromptFunction.value = prompt;
    searchPlaceholder.value = placeholder;
    searchInputValue.value = ''; // 清空搜索框
    console.log("搜索事件已被子组件接管");
};

// 释放搜索事件
const releaseSearch = () => {
    searchFunction.value = searchDefaultFunction;
    searchPromptFunction.value = searchDefaultPromptFunction;
    searchPlaceholder.value = searchDefaultPlaceholder;
    searchInputValue.value = ''; // 清空搜索框
    console.log("搜索事件已被子组件释放");
};

// 提供方法和状态给子组件
provide("takeOverSearch", takeOverSearch);
provide("releaseSearch", releaseSearch);

// 搜索
const search = (input: string) => {
    if (!searchFunction.value) // 当前页面禁用搜索
    {
        console.log("当前页面禁用搜索");
        return;
    }

    return searchFunction.value(input);
};

// 搜索提示
const searchPrompt = (input: string) => {
    if (!searchPromptFunction.value) // 当前页面禁用搜索提示
    {
        console.log("当前页面禁用搜索提示");
        return;
    }

    return searchPromptFunction.value(input);
};

const userNavigationShow = (event) => {
    const userNavigation = event.currentTarget.querySelector('.userNavigation');
    userNavigation.style.transition = 'none';
    userNavigation.style.height = 'auto';
    const height = userNavigation.offsetHeight;
    userNavigation.style.height = 0;
    userNavigation.offsetHeight; // Trigger reflow
    userNavigation.style.transition = '.3s all';
    userNavigation.style.height = `${height + 5}px`;
};

const userNavigationHide = (event) => {
    const userNavigation = event.currentTarget.querySelector('.userNavigation');
    userNavigation.style.transition = '.3s all';
    userNavigation.style.height = 0;
};

// Define component name
defineOptions({
    name: 'manager'
});
</script>

<style src="@/assets/icons/iconfont.css" scoped></style>

<style scoped>
.manager {
    width: 100%;
    height: 100%;
    min-width: 1320px;
    min-height: 800px;
    position: absolute;
}

/* html {

    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);

} */

#background {
    width: 100%;
    height: 100%;
    position: absolute;
}

#background .background_image {
    width: 100%;
    height: 100%;
    /* background-image: url("http://www.likesprogram.com/SystemImg/Max/DesktopImage.png"); */
    background-image: url("@/assets/images/background.png");
    background-position: 0% 0%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
}

#background .background_overlay {
    width: 100%;
    height: 100%;
    position: absolute;
}

#background .background_filter {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: rgba(255, 255, 255, .8);
    backdrop-filter: blur(2rem);
    -webkit-backdrop-filter: blur(2rem);
    -moz-backdrop-filter: blur(2rem);
    -ms-backdrop-filter: blur(2rem);
}

#managerHeader {
    width: 100%;
    height: 65px;
    z-index: 9;
    background-color: rgba(255, 255, 255, 1);
    backdrop-filter: blur(2rem);
    -webkit-backdrop-filter: blur(2rem);
    -moz-backdrop-filter: blur(2rem);
    -ms-backdrop-filter: blur(2rem);
    box-shadow: 0 0 10px rgba(0, 0, 0, .3);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Logo */
#managerHeader .logo {
    min-width: 250px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(3px 3px 2px rgba(10, 100, 255, 0.3));
}

/* Logo 图片 */
#managerHeader .logo .logoImage {
    height: 50px;
    padding-right: 10px;
}

#managerHeader .logo .logoImage img {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Logo 文字 */
#managerHeader .logo .logoText {
    height: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#managerHeader .logo .logoText .logoPrimaryText {
    letter-spacing: 14px;
    /* 为每个字符添加间隙 */
    font-size: 26px;
    height: 24px;
    line-height: 24px;
    font-weight: bold;
    font-family: "artisticFonts";
    background-image: linear-gradient(rgba(65, 185, 255, 1), rgb(24, 120, 190));
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

#managerHeader .logo .logoText .logoSecondaryText {
    font-size: 16px;
    /* "计算机科学与工程学院"的字体大小 */
    height: 18px;
    line-height: 18px;
    font-family: "方正舒体";
    font-weight: bold;
    letter-spacing: 4px;
    /* 为每个字符添加间隙 */
    background-image: linear-gradient(rgba(65, 185, 255, 1), rgb(24, 120, 190));
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}


#managerHeader .navigation {
    height: 100%;
    width: 1000px;
    padding: 0px 17px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

#managerHeader .navigation .link {
    padding: 0px 40px;
    font-size: 20px;
    color: black;
}

#managerHeader .navigation .link:hover {
    color: rgba(65, 185, 255, 1);
}

#managerHeader .navigation .home .router-link-exact-active,
#managerHeader .navigation .catalogues .router-link-active {
    font-weight: bold;
    color: rgba(65, 185, 255, 1);
}

#managerHeader .search {
    margin: 0px 20px;
    height: 35px;
    width: 250px;
    min-width: 200px;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid rgba(100, 100, 100, .5);
    display: flex;
    align-items: center;
    justify-content: center;
}

#managerHeader .search:focus-within {
    border: 2px solid rgba(65, 185, 255, 1);
}

#managerHeader .search input {
    width: 100%;
    border: none;
    height: 100%;
    background-color: rgba(100, 100, 100, 0);
    padding-left: 10px;
}

#managerHeader .search input:focus {
    outline: none;
}

#managerHeader .search .searchButton {
    width: 35px;
    height: 35px;
    min-width: 35px;
    min-height: 35px;
    font-size: 22px;
    color: rgba(100, 100, 100, 1);
    display: flex;
    align-items: center;
    justify-content: center;
}

#managerHeader .search .searchButton:hover {
    font-size: 24px;
    color: rgba(65, 185, 255, 1);
}

#managerHeader .user,
#managerHeader .user .userLink {
    width: 150px;
    height: 100%;
    position: relative;
}

#managerHeader .user .userLink,
#managerHeader .user .userNavigation .link {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: black;
}

#managerHeader .user:hover .userLink,
#managerHeader .user .userNavigation .link:hover {
    color: rgba(65, 185, 255, 1);
}

#managerHeader .user:hover .userLink .avatar {
    border: 2px solid rgba(65, 185, 255, 1);
}

/*
#managerHeader .user .router-link-active, #managerHeader .user .userNavigation .router-link-active {
    color: rgba(65, 185, 255, 1);
}
*/

#managerHeader .user .router-link-active,
#managerHeader .user .userNavigation .home .router-link-exact-active,
#managerHeader .user .userNavigation .catalogues .router-link-active {
    color: rgba(65, 185, 255, 1);
}

#managerHeader .user .router-link-active .avatar {
    border: 2px solid rgba(65, 185, 255, 1);
}

#managerHeader .user .avatar {
    width: 35px;
    min-width: 35px;
    height: 35px;
    min-height: 35px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(100, 100, 100, .5);
}

#managerHeader .user .avatar img {
    width: 100%;
    height: 100%;
}

#managerHeader .user .username {
    width: 100%;
    padding-left: 10px;
    font-size: 16px;
    /* 文字溢出显示 ... */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#managerHeader .user .userNavigation {
    width: 100%;
    height: 0px;
    top: 100%;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 0px 0px 10px 10px;
    backdrop-filter: blur(2rem);
    -webkit-backdrop-filter: blur(2rem);
    -moz-backdrop-filter: blur(2rem);
    -ms-backdrop-filter: blur(2rem);
    box-shadow: 0px 5px 10px -5px rgba(0, 0, 0, .3);
    position: absolute;
    overflow: hidden;
}

#managerHeader .user .userNavigation .link {
    width: 100%;
    height: 35px;
    padding: 10px 0px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#managerHeader .user .userNavigation .link .iconfont {
    padding-right: 10px;
    font-size: 24px;
}

#content {
    width: 100%;
    height: calc(100% - 65px);
    overflow: hidden;
    overflow-y: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
}
</style>
